<template>
  <div class="main" v-if="flag">
    <div class="header">
      <div>
        <span>状态:</span>
        <el-select
          class="m-2"
          v-model="selectedObject"
          placeholder="全部"
          size="small"
          value-key="id"
        >
          <el-option
            v-for="item in listTop"
            :key="item.id"
            :label="item.stuats"
            :value="item.stuats"
          />
        </el-select>
      </div>
      <div class="two">
        <span>地区:</span>
        <el-select
          v-model="value"
          class="m-2"
          placeholder="全部"
          size="small"
          value-key="id"
        >
          <el-option
            v-for="item in listTop"
            :key="item.id"
            :label="item.adress.slice(0, 2)"
            :value="item.adress"
          />
        </el-select>
      </div>
      <div>
        <div class="demo-date-picker">
          <div class="block">
            <span class="demonstration">时间:</span>
            <el-date-picker
              v-model="value1"
              type="date"
              placeholder="选择日期"
              :size="size"
            />
            <el-time-select
              class="one"
              v-model="value2"
              start="08:30"
              step="00:15"
              end="18:30"
              placeholder="选择时间"
            />
          </div>
        </div>
      </div>
      <el-button type="info" plain @click="btn">重置</el-button>
      <el-button type="primary">确定</el-button>
    </div>
    <div class="add">
      <el-button type="primary" :bg="false" @click="newshop"
        >新增秒杀</el-button
      >
      <el-button type="primary">批量中止</el-button>
      <el-button type="primary" @click="someremove">批量删除</el-button>
    </div>
  </div>
  <div class="new" v-else>
    <h2>商品介绍</h2>
    <div>
      <span>秒杀类型：</span>
      <el-select v-model="selectedObj" class="m-2" placeholder="Select">
        <el-option
          v-for="item in listTop"
          :key="item.value"
          :label="item.label"
          :value="item.stuats"
        />
      </el-select>
    </div>
    <div>
      <span>秒杀标题：</span>
      <el-select v-model="selectObj" class="m-2" placeholder="Select">
        <el-option
          v-for="item in listTop"
          :key="item.value"
          :label="item.label"
          :value="item.adress"
        />
      </el-select>
    </div>
    <div>
      <span>活动时间：</span>
      <el-date-picker
        v-model="value3"
        type="datetimerange"
        range-separator="To"
        start-placeholder="Start date"
        end-placeholder="End date"
      />
    </div>
    <el-button type="primary" @click="btntwo">重置</el-button>&ensp;<el-button
      type="primary"
      class="twobutton"
      @click="add"
      >确定</el-button
    >
  </div>
  <div class="listbom">
    <el-table
      :fit="true"
      ref="multipleTableRef"
      :data="listbottom"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      @select="select"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        property="a"
        label="订单编号"
        min-width="120"
        max-height="30px"
      />
      <el-table-column property="stuats" label="商品名称" min-width="100" />
      <el-table-column property="adress" label="供应商" min-width="180" :show-overflow-tooltip="true"/>
      <el-table-column property="miao" label="销售价" min-width="120" />
      <el-table-column property="timer" label="秒杀时间" min-width="160" />
      <el-table-column property="miao" label="秒杀价" min-width="80" />
      <el-table-column property="miao" label="秒杀数量" min-width="80" />
      <el-table-column property="miao" label="限购量" min-width="80" />
      <el-table-column property="miao" label="运费" min-width="80" />
      <el-table-column property="name" label="操作" min-width="180">
        <el-button type="info" round >编辑</el-button>
        <el-button type="info" round >完成</el-button>
        <el-button type="info" round >操作</el-button>
      </el-table-column>
    </el-table>
  </div>
  <div class="page">
    <el-pagination background layout="prev, pager, next" :total="count"
    @current-change="handleCurrentChange" 
/>
  </div>
</template>
<script>
import { ref, onMounted } from "vue";
import { data } from "@/utils/promotion/index.js";
import { news, list } from "@/mock2/adress";
export default {
  setup() {
    // // 时间js
    const [disabledDate, value1, value2, shortcuts, value3, shortcuts1, size] =
      data();
    //头部新增显示隐藏功能
    const flag = ref(true);
    const newshop = () => {
      (selectedObj.value = ""),
      (selectObj.value = ""),
      flag.value = false;
    };
    //批量删除功能
    let ids
    const select = (selection)=>{
      ids = selection.map(el=>el.id)
    }
    const someremove =async () =>{
      list.remove({
        ids :ids
      })
      const res = await list.getlistData({
        pageSize: 10,
        currentPage: currentPage.value,
      })
      listbottom.value = res.list;
    }
    //新增添加功能
    const add =async () => {
      if(selectedObj.value!==''&&selectObj.value!==''){
        list.adddata(selectedObj.value,selectObj.value)
      }
      flag.value = true;
      const res = await list.getlistData({
        pageSize: 10,
        currentPage: currentPage.value,
      })
      listbottom.value = res.list;
    };
    //状态地区 重置按钮
    const value = ref("");
    const selectedObject = ref({
      id: 0,
      name: "",
    });
    const btn = () => {
      (value.value = ""),
        (selectedObject.value = ""),
        (value1.value = ""),
        (value2.value = "");
    };
    //新增样品重置功能
    const selectedObj = ref({
      id: 0,
      name: "",
    });
    const selectObj = ref({
      id: 0,
      name: "",
    });
    const btntwo = () => {
      (selectObj.value = ""), (selectedObj.value = ""), (value3.value = "");
    };
    //下拉菜单多选框请求的数据
    const listTop = ref([]);
    onMounted(async () => {
      const res = await news.getData();
      listTop.value = res.list;
    });
    //列表数据请求
    const count = ref(100)
    const currentPage = ref(1);
    const listbottom = ref([]);
    const pageSize = ref(10)
    const handleCurrentChange = async (newSize) =>{
      currentPage.value = newSize
      const res =await list.getlistData({
        pageSize: 10,
        currentPage: newSize,
      });
      count.value = res.count
      listbottom.value = res.list;
    }
    onMounted(async () => {
      const res = await list.getlistData({
        pageSize: 10,
        currentPage: currentPage.value,
      });
      listbottom.value = res.list;
    });
    //列表数据渲染
    const multipleTableRef = ref();
    const multipleSelection = ref([]);
    const toggleSelection = (rows) => {
      if (rows) {
        rows.forEach((row) => {
          multipleTableRef.value.toggleRowSelection(row);
        });
      } else {
        multipleTableRef.value.clearSelection();
      }
    };
    const handleSelectionChange = (val) => {
      if(multipleSelection.value){
        multipleSelection.value = val;
      }
    };
    return {
      someremove,
      select,
      count,
      pageSize,
      handleCurrentChange,
      handleSelectionChange,
      toggleSelection,
      listbottom,
      selectObj,
      selectedObj,
      selectedObject,
      value,
      listTop,
      size,
      flag,
      btn,
      btntwo,
      newshop,
      add,
      disabledDate,
      value1,
      value2,
      shortcuts,
      value3,
      shortcuts1,
    };
  },
};
</script>
<style lang="less" scoped>
.new {
  width: 100%;
  > h2 {
    background: #82c4f1;
    opacity: 0.4;
    border-radius: 10px 10px 0px 0px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    font-family: YouYuan;
    font-weight: 400;
    color: black;
    text-indent: 28px;
  }
  span {
    color: black;
    margin-left: 28px;
    margin-right: 25px;
  }
  > div:nth-of-type(1) {
    margin-top: 20px;
    .m-2 {
      width: 220px;
      height: 36px;
      border-radius: 4px;
    }
  }
  > div:nth-of-type(2) {
    margin-top: 15px;
    .m-2 {
      width: 220px;
      height: 36px;
      border-radius: 4px;
    }
  }
  > div:nth-of-type(3) {
    margin-top: 15px;
    .m-2 {
      width: 220px;
      height: 36px;
      border-radius: 4px;
    }
  }
  .el-button {
    width: 119px;
    height: 35px;
    border: 2px solid #70afda;
    border-radius: 10px;
    margin-left: 129px;
    margin-top: 20px;
  }
  .twobutton {
    margin-left: 61px;
  }
}
.main {
  .header {
    width: 100%;
    display: flex;
    align-items: center;
  }
  .m-2 {
    width: 70px;
    height: 100%;
  }
  .el-input__inner {
    height: 30px;
  }
  span {
    font-size: 14px;
    font-family: YouYuan;
    font-weight: 400;
    color: #666666;
  }
  .el-input__wrapper {
    margin-left: 10px;
  }
  .one {
    margin-left: 10px;
  }
  .two {
    margin-left: 49px;
    margin-right: 49px;
  }
  .el-picker__popper {
    left: 532px !important;
  }
  .el-select__popper {
    left: 823px !important;
  }
  .el-button--info {
    margin-left: 15px;
  }
  .el-button {
    color: #666666;
    width: 100px;
    height: 25px;
    background: white;
  }
  .header .el-button {
    width: 65px;
  }
  .add {
    margin-top: 18px;
  }
}
.listbom {
  margin-top: 20px;
  .el-button--info {
    width: 35px;
    height: 25px;
    font-size: 12px;
  }
}
.page {
  text-align: center;
  width: 100%;
  margin-top: 15px;
  .el-pagination {
    margin-left: 400px;
  }
}
</style>